<script lang="ts" setup>
	import {
		ref,
		reactive,
		inject,
		computed,
		watch,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad, onShow, onUnload
	} from '@dcloudio/uni-app'
	// import chat from '@/api/chat.js'
	import user from '@/api/user.js'
	import {
		useStore
	} from 'vuex'
	import chat from '@/api/chat';
	const { proxy } : any = getCurrentInstance()
	const socket : any = inject("$socket");
	const store = useStore()
	const searchValue = ref('')
	let allState = reactive({
		list: [],
		userinfo: uni.getStorageSync('userinfo'),//自己的
		crowdList: [],
		socketUsers: [],
		applyList: []
	})
	const changeUsers = computed(() => {
		return store.state.users
	}) 
	const chatRecords = computed(() => {
		return store.state.chatRecords
	})
	watch(changeUsers, (newValue) => {
		let newList = forAway(allState.list)
		allState.socketUsers = merge(newList, newValue)
	})
	watch(chatRecords, () => {
		filterNum()
	})
	//获取关注列表
	const followList = async () => {
		const res = await user.getUserList({
			username: '',
			type: 1,
			userid: allState.userinfo.userid
		})
		const res2 = await user.getUserList({
			username: '',
			type: 2,
			userid: allState.userinfo.userid
		})
		allState.list = [...res.data, ...res2.data]
		let newList = forAway([...res.data, ...res2.data])
		allState.socketUsers = await merge(newList, changeUsers.value)
		filterNum()
	}
	const forAway = (arr) => {

		let forData = [];
		for (let i = 0; i < arr.length; i++) {
			if (!forData.some(e => e.userid == arr[i].userid)) forData.push(arr[i]);
		}
		return forData
	}
	const merge = (arr, arr2) => {
		const newArr = arr.map(item => {
			const data = arr2.find(i => item.userid == i.userid)
			return {
				...item,
				...data
			}
		})

		return newArr
	}
	const filterNum = () => {
		for (let i in allState.socketUsers) {
			allState.socketUsers[i].msgNum = 0
			for (let j in store.state.chatRecords) {
				if (allState.socketUsers[i].userid == store.state.chatRecords[j].userid) {
					allState.socketUsers[i].msgNum++
					allState.socketUsers[i].time = proxy.$u.timeFormat(store.state.chatRecords[i].time, 'hh:MM')
				}
			}
		}
	}
	onLoad(() => {
		getCrowdList()
		socket.on('getApplyCrowd',msg => {
			allState.applyList = msg
		})
	})
	onUnload(() => {
		socket.removeListener('getApplyCrowd')
	})
	onShow(() => {
		followList()
		socket.emit('getApplyCrowd',allState.userinfo.userid)
	})
	const goChrt = (item : object, type : Number) => {
		store.commit('chatUser', item)
		uni.removeTabBarBadge({ //隐藏数字标
			index: 3
		})
		if (type) {
			uni.navigateTo({
				url: '/pages_new/chat/index'
			})
		} else {
			uni.navigateTo({
				url: '/pages_new/crowdChat/index'
			})
		}
	}

	const link = (src: string) => {
		uni.navigateTo({
			url: src
		})
	}
	const getCrowdList = async () => {
		const res = await chat.getCrowdList()
		allState.crowdList = res.data
	}
</script>
<template>
	<view class="main">
		<u-navbar :is-back="false">
			<view class="flex flex-jc-sb f1 nav">
				<view @click="link('/pages_new/findCrowd/index')">发现群</view>
				<view>消息</view>
				<view @click="link(`/pages_new/createCrowd/index`)">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-search class="search" placeholder="搜索群/好友" v-model="searchValue" :show-action="false"></u-search>
		<view class="list">
			<!-- 系统消息 -->
			<view class="flex flex-ai-c list-item">
				<u-icon name="chat" size="60rpx"></u-icon>
				<view class="list-item-font f1">评论</view>
			</view>
			<view class="flex flex-ai-c list-item">
				<u-icon name="thumb-up-fill" size="60rpx"></u-icon>
				<view class="list-item-font f1">赞</view>
			</view>
			<view class="flex flex-ai-c list-item" @click="link('/pages_new/apply/index')" v-if="allState.applyList.length">
				<u-icon name="chat" size="60rpx"></u-icon>
				<view class="list-item-font f1">系统消息</view>
				<view class="flex flex-jc-c flex-ai-c" style="background-color: red;color: #fff;border-radius: 50%;width: 30rpx;height: 30rpx">
					{{allState.applyList.length}}
				</view>
			</view>
			<!-- 群消息或or好友消息 -->
			<view v-for="item in allState.socketUsers" :key="item.userid" @click="goChrt(item,1)">
				<view class="flex flex-ai-c list-item">
					<image :src="item.handimg"></image>
					<view class="f1 list-item-info flex flex-dir-c flex-jc-c">
						<view style="margin-bottom: 20rpx;">{{item.nickname || item.username}}</view>
						<view>{{item.id?'在线':'离线'}}</view>
					</view>
					<view class="list-time flex flex-dir-c flex-ai-c" style="text-align: center;">
						<view>{{item.time || null}}</view>
						<view v-if="item.msgNum"
							style="background-color: red;width: 30rpx;height: 30rpx;color: #fff;border-radius: 50%;">
							{{item.msgNum >= 100 ? 99: item.msgNum}}
						</view>
					</view>
				</view>
			</view>
			<view style="margin: 20rpx;">群列表</view>
			<!-- 群 -->
			<view v-for="item in allState.crowdList" :key="item.id" @click="goChrt(item,0)">
				<view class="flex flex-ai-c list-item">
					<image :src="item.img"></image>
					<view class="f1 list-item-info flex flex-dir-c flex-jc-c">
						<view>{{item.bz || item.title}}</view>
					</view>
					<view class="list-time flex flex-dir-c flex-ai-c" style="text-align: center;">
						<view>{{item.time || null}}</view>
						<view v-if="item.msgNum"
							style="background-color: red;width: 30rpx;height: 30rpx;color: #fff;border-radius: 50%;">
							{{item.msgNum >= 100 ? 99: item.msgNum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped src="./index.scss"></style>